<template>
  <section id="home" class="w-full flex flex-col justify-between px-8 py-8">
    <!-- 顶部内容区域 -->
    <div class="flex-1 flex flex-col lg:flex-row items-center justify-around max-w-[1200px] mx-auto w-full">
      <!-- 左侧文字 -->
      <div class="flex-1 space-y-6">
        <div>
          <h1 class="text-4xl lg:text-5xl font-bold leading-tight text-gray-900">
            <span class="text-blue-600">零依赖、类型安全</span><br />
            的音效播放库
          </h1>
          <p class="text-lg text-gray-500 mt-4">
            根据项目中的 MP3 文件名自动生成 TypeScript 智能提示，<br />
            让音效播放更简单高效。
          </p>
        </div>

        <!-- CTA 按钮 -->
        <div class="flex gap-4 pt-2">
          <a href="#guide"
            class="bg-blue-600 cursor-pointer text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition">
            🚀 快速开始
          </a>
          <a :href="globalData.githubUrl" target="_blank"
            class="bg-gray-100 cursor-pointer text-gray-800 px-6 py-2 rounded-lg font-medium hover:bg-gray-200 transition">
            ⭐ GitHub
          </a>
        </div>
      </div>

      <!-- 右侧插图 -->
      <div class="flex-1 mt-10 lg:mt-0 lg:ml-10 flex justify-center">
        <div class="relative w-64 h-64 md:w-48 md:h-48">
          <div class="absolute inset-0 bg-indigo-400 rounded-full opacity-20 animate-pulse"></div>
          <div class="absolute inset-4 bg-indigo-500 rounded-full opacity-30 animate-ping"></div>
          <div class="absolute inset-8 bg-white rounded-full shadow-xl flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-indigo-600" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部特点区域 -->
    <div class="w-full max-w-[1200px] mx-auto  mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div v-for="(feature, index) in features" :key="index"
        class="bg-gray-50 border border-gray-200 p-6 rounded-xl shadow-sm hover:shadow-md transition">

        <h3 class="text-lg font-semibold text-gray-900 flex items-center"> <span class="text-3xl mr-2">{{ feature.icon
            }}</span>{{ feature.title }}</h3>
        <p class="text-sm text-gray-600 mt-1">{{ feature.desc }}</p>
      </div>
    </div>
  </section>
</template>

<script setup>
import { globalData } from '@/assets/data/global.js'
const features = [
  {
    icon: '🧠',
    title: '类型安全',
    desc: '完整的 TypeScript 类型定义，智能提示所有音效名称。',
  },
  {
    icon: '📦',
    title: '零依赖',
    desc: '不依赖第三方库，体积小巧，加载快速。',
  },
  {
    icon: '🔁',
    title: '自动更新',
    desc: '增删音效文件后重新构建，类型自动更新。',
  },
  {
    icon: '💡',
    title: '自包含',
    desc: '音效内联在代码中，安装即可使用，无需配置。',
  },
  {
    icon: '⚡',
    title: '快速上手',
    desc: '通过一行代码即可播放音效，开发更高效。',
  },
  {
    icon: '🎯',
    title: '精准命中',
    desc: '命名即引用，避免播放错误音效。',
  },
];
</script>
<style>
#home {
  min-height: calc(100vh - 60px);
}
</style>